<template>
  <ul class="u_route" :id="sectionId">
    <div class="main2_left">
      <div class="main2_left_t" :style="leftTitleStyle">
        <i :class="iconClass"></i> {{ sectionTitle }}
      </div>
    </div>
    <div class="main2_right" v-for="(JouneryGroupInfo, index) in JouneryGroups" :key="index" :class="index == 0 ? 'wrap-box':'wrap-box hide'" find-trip-center>
      <div class="main2_right_m2 active">
        <slot :JouneryGroupInfo="JouneryGroupInfo"></slot>
      </div>
    </div>
    <div class="clear"></div>
  </ul>
</template>

<script>
export default {
  props: {
    sectionId: {
      type: String,
      required: true
    },
    sectionTitle: {
      type: String,
      required: true
    },
    iconClass: {
      type: String,
      required: true
    },
    leftTitleStyle: {
      type: Object,
      default: () => ({})
    },
    JouneryGroups: {
      type: Array,
      required: true
    }
  }
}
</script>